<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./vue.js"></script>
    <script src="./axios.js"></script>
</head>

<body>

</body>
<div id="app">
    <ol>
        <!-- v-bind:key 唯一标识，如果不加，则会有警告 -->
        <!-- v-bind:todo --todo是一个变量，绑定了item的动态数据 -->
        <temp-list v-for='item in info' v-bind:todo="item" v-bind:key="item.id"></temp-list>
        <li v-for='item in info'>bg_pic:&nbsp;&nbsp;&nbsp;{{item.bg_pic}}</li>
        <li v-for='(item,index) in info'>bg_color: {{item.bg_color}}---index:{{index}}</li>
    </ol>
</div>

<!-- 获取两级下的数据 -->
<div id="app2">
    <ul>
        <li v-for="item in info">
            title:{{item.content[0].title}}
        </li>
    </ul>
</div>

<!-- 可以用 of 替代 in 作为分隔符，因为它更接近 JavaScript 迭代器的语法： -->
<div id="app3">
    <ul v-for="item of info">
        <li>
            country:{{item.country}}
        </li>
        <li>
            artist_name:{{item.artist_name}}
        </li>
        <li>
            language:{{item.language}}
        </li>
        <li>
            title:{{item.title}}
        </li>
        <li>
            si_proxycompany:{{item.si_proxycompany}}
        </li>
    </ul>
    <ul v-for="item of items">
        <li>
            country:{{item.country}}
        </li>
        <li>
            artist_name:{{item.artist_name}}
        </li>
        <li>
            language:{{item.language}}
        </li>
        <li>
            title:{{item.title}}
        </li>
        <li>
            si_proxycompany:{{item.si_proxycompany}}
        </li>
    </ul>
</div>

<div id="app4">
    <!-- 在v-for遍历对象，agem1:value ,agem2:key ,agem3:index -->
    <ul>
        <li v-for="(item,name,index) in object">
            {{index}}--{{name}}---{{item}}
        </li>
    </ul>
</div>

<div id="app5">
    <ul>
        <!-- 维护状态

            当 Vue 正在更新使用 v-for 渲染的元素列表时，它默认使用“就地更新”的策略。
            如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，
            而是就地更新每个元素，并且确保它们在每个索引位置正确渲染。
            这个类似 Vue 1.x 的 track-by="$index"。

            这个默认的模式是高效的，
            但是只适用于不依赖子组件状态或临时 DOM 状态 (例如：表单输入值) 的列表渲染输出。

            为了给 Vue 一个提示，以便它能跟踪每个节点的身份，
            从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性： 
        -->
        <li v-for="item of items" v-if="item.data.content ? true : false" v-bind:key="item.key">
            {{item.data.content.data.playUrl}}
        </li>
        <!--
            建议尽可能在使用 v-for 时提供 key attribute，除非遍历输出的 DOM 内容非常简单，
            或者是刻意依赖默认行为以获取性能上的提升。

            因为它是 Vue 识别节点的一个通用机制，key 并不仅与 v-for 特别关联。
            后面我们将在指南中看到，它还具有其它用途。

            不要使用对象或数组之类的非基本类型值作为 v-for 的 key。请用字符串或数值类型的值。 
        -->
    </ul>
</div>

<!-- 添加任务菜单 -->
<div id="app6">
    <input type="text" v-model='message'>
    <input type="button" @click='[inserted(),clearVal()]' value="添加">
    <ol>
        <ul v-for='item of items' v-if='item == null ? false :true'>
            {{item}}
        </ul>
    </ol>
    <div v-for="(items,name) of files">
        {{name}}--{{items}}
    </div>
</div>
<script>
    Vue.component('temp-list', {
        props: ['todo'],
        template: "<li>pic_s210:&nbsp;&nbsp;&nbsp;{{todo.pic_s210}}</li>"
    });
    let vm = new Vue({
        el: app,
        data() {
            return {
                info: null,
            }
        },
        mounted() {
            axios
                .get('https://api.apiopen.top/musicRankings')
                .then(function(response) {
                    // console.log(this)
                    //这里如果不使用箭头函数，那么这个this指向的是window
                    return vm.info = response.data.result;
                })
                .catch(function(error) {
                    console.log(error)
                })
        },
    });

    var vm2 = new Vue({
        el: app2,
        data: {
            info: null
        },
        mounted: () => {
            //当mounted使用箭头函数时，axios中也只能使用vue实例
            //因为this会一直向上找，axios中是箭头函数，就向上一级找this指向
            //mounted是箭头函数，也不存在this，vue上一级this是window，所以只能使用vue实例
            axios
                .get('https://api.apiopen.top/musicRankings')
                .then(response => vm2.info = response.data.result)
        }
    })

    new Vue({
        el: app3,
        data: {
            info: null,
            items: null,
        },
        mounted() {
            axios
                .get('https://api.apiopen.top/musicRankingsDetails?type=1')
                .then(response => this.info = response.data.result)
                .catch(function(error) {
                    console.log(error)
                });
            axios
                .get('https://api.apiopen.top/musicRankingsDetails?type=2')
                .then(response => this.items = response.data.result)
                .catch(function(error) {
                    console.log(error)
                })
        }
    })

    new Vue({
        el: '#app4',
        data: {
            object: {
                title: 'How to do lists in Vue',
                author: 'Jane Doe',
                publishedAt: '2016-04-10'
            }
        }
    })

    new Vue({
        el: app5,
        data: {
            items: null
        },
        mounted() {
            axios
                .get('https://api.apiopen.top/todayVideo')
                .then(response => this.items = response.data.result)
        }
    });
    /**
     * 变异方法 (mutation method)
     * Vue 将被侦听的数组的变异方法进行了包裹，所以它们也将会触发视图更新。这些被包裹过的方法包括：
     * push() --在数组最后添加元素
     * pop()  --移除最后一个元素
     * shift()   --在数组第一位插入元素
     * unshift() --移除第一位元素
     * splice()  --截取
     * sort()    --排序
     * reverse() --颠倒
     * 
     * 你可以打开控制台，然后对前面例子的 items 数组尝试调用变异方法。
     * 比如 example1.items.push({ message: 'Baz' })。
     */
    var vm3 = new Vue({
        el: "#app6",
        data: {
            items: [],
            message: null,
            files: {}
        },
        methods: {
            inserted: function() {
                return this.items.push(this.message)
            },
            clearVal: function() {
                return this.message = null
            }
        }
    });
    // 对于已经创建的实例， Vue 不允许动态添加根级别的响应式属性。
    // 但是， 可以使用 Vue.set(object, propertyName, value) 方法向嵌套对象添加响应式属性

    //添加一个新的 values 属性到嵌套的 files 对象：
    Vue.set(vm3.files, 'values', '100000');

    //还可以使用 vm.$set 实例方法，它只是全局 Vue.set 的别名：
    vm.$set(vm3.files, 'age', 27)

    //有时你可能需要为已有对象赋值多个新属性， 比如使用 Object.assign() 或 _.extend()。 
    //在这种情况下， 你应该用两个对象的属性创建一个新的对象。 
    //所以， 如果你想添加新的响应式属性， 不要像这样：
    /*
        Object.assign(vm.userProfile, {
        age: 27,
        favoriteColor: 'Vue Green'
        })
    */
    //动态插入对象
    vm3.files = Object.assign({}, vm3.files, {
        ages: "22",
        money: "$1000",
        keys: "pang",
        value: "chaoyue"
    })
</script>

</html>